<template>
    <el-form :model="model" size="small" label-width="80px" class="form-body">
        <el-row :gutter="20">
            <slot></slot>
            <template v-if="showSearch">
                <slot name="show"></slot>
            </template>

            <el-col :span="8" :offset="offset" >
                <div class="control-button">
                    <el-button type="primary" @click="$emit('search')">搜索</el-button>
                    <el-button @click="$emit('reset')">重置</el-button>
                    <el-button v-if="hasShowSearch" link type="primary" @click="showSearch = !showSearch">
                        {{ showSearch ? "收起" : "展开" }}
                        <el-icon class="control-icon">
                            <component :is="showSearch ? 'arrow-up-bold' : 'arrow-down-bold'"></component>
                        </el-icon>
                    </el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup>
import { computed, ref, useSlots } from 'vue'

const props = defineProps({
    model: Object
})

defineEmits(["search", "reset"])

const slots = useSlots()

const showSearch = ref(false)

const onlyOne = ref(true)
if (slots.default) {
    onlyOne.value = (slots.default()).length == 1
}

const offset = computed(() => (!onlyOne.value || showSearch.value) ? 0 : 8)

const hasShowSearch = ref(!!slots.show)
</script>
<style lang="scss" scoped>
.form-body {
    margin-bottom: 12px;
    .control-button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .control-icon {
            margin-left: 4px;
        }
    }
}
</style>